<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales';
import type { ApiSysLogLoginOut } from '@/api-services';
import { UserApi } from '@/api-services/apis/user-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { REG_PWD, REG_USER_NAME } from '@/constants/reg';
import { ApiroleserviceApi } from '@/api-services/apis/apiroleservice-api';
import { NetoKit } from '@/typings/neto';
import { SyslogApi } from '@/api-services/apis/syslog-api';


interface Props {
  /** the type of operation */
  operateType: UI.TableOperateType;
  /** the edit row data */
  rowData?: ApiSysLogLoginOut | null;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { formRef, validate, restoreValidation } = useForm();
const { defaultRequiredRule } = useFormRules();


type Model = NetoKit.NullToUndefined<ApiSysLogLoginOut>;
const model = ref(createDefaultModel());
// string转换为number
// model.value.roleIds = model.value.roleIdStr?.split(',').map(Number);
function createDefaultModel(): Model {
  return {
    id: 0,
  };
}




function handleInitModel() {
  model.value = createDefaultModel();

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model.value, props.rowData);
  }
}


watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
    // getRoleOptions();
  }
});
</script>

<template>
  <NModal v-model:open="visible" :title="$t('page.sysLoginLog.titleName')" width="800px">
    <ElCard title="基本信息" class="card-container">
      <ElForm ref="formRef" label-width="auto" :model="model" class="custom-form">
        <ElRow :gutter="16">
          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.account')" name="account" class="form-item">
              <span class="form-value">{{ model.account }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="IP" name="ip" class="form-item">
              <span class="form-value">{{ model.ip }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :lg="12" :xs="12">
            <ElFormItem :label="$t('page.sysLog.isSuccess')" name="isSuccess" class="form-item">
              <ElTag :type="model.status == 1 ? 'success' : 'warning'" class="status-tag">
                {{ model.status == 1 ? $t('common.success') : $t('common.failed') }}
              </ElTag>
            </ElFormItem>
          </ElCol>
          <ElCol :lg="12" :xs="12">
            <ElFormItem :label="$t('page.sysLoginLog.type')" name="type" class="form-item">
              <ElTag type="primary" v-if="model.type == 0" class="type-tag">
                {{ $t('page.sysLoginLog.typeEnum.admin') }}
              </ElTag>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('common.creationTime')" name="creationTime" class="form-item">
              <span class="form-value">{{ model.creationTime }}</span>
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.result')" name="result" class="form-item">
              <span class="form-value">{{ model.result }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.browser')" name="browser" class="form-item">
              <span class="form-value">{{ model.browser }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.os')" name="os" class="form-item">
              <span class="form-value">{{ model.os }}</span>
            </ElFormItem>
          </ElCol>

        </ElRow>
      </ElForm>
    </ElCard>

    <ElCard title="拓展信息" class="card-container">
      <ElForm ref="formRef" label-width="auto" :model="model" class="custom-form">
        <ElRow :gutter="16">
          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.requestUrl')" name="requestUrl" class="form-item">
              <span class="form-value url-value">{{ model.requestUrl }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('id')" name="id" class="form-item">
              <span class="form-value">{{ model.id }}</span>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('page.sysLoginLog.tableId')" name="tableId" class="form-item">
              <span class="form-value">{{ model.tableId }}</span>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>

    </ElCard>
    <template #footer>
    </template>
  </NModal>
</template>

<style scoped>
.card-container {
  /* padding: 16px; */

  /* margin: 24px; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.custom-form {
  padding: 16px 0;
}

.form-item {
  margin-bottom: 16px;
}

.form-item .ant-form-item-label {
  padding-bottom: 4px;
}

.form-item .ant-form-item-label label {
  color: #6b7280;
  font-weight: 500;
  font-size: 14px;
}

.form-value {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f9fafb;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  min-height: 32px;
  width: 100%;
  color: #1f2937;
  font-size: 14px;
}

.url-value {
  word-break: break-all;
}

.status-tag,
.type-tag {
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 14px;
}
</style>
